<template>
  <el-pagination
    background
    layout="prev, pager, next"
    :page-size="pageSize"
    :current-page="currentPage"
    :total="props.tableData.length"
    @current-change="huan"
  />
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'
import { defineProps } from 'vue'
//props
const props = defineProps({
  tableData: Array
})
//当前页
const currentPage = ref(1)
//一页几条
const pageSize = ref(6)
const paginatedTableData = computed(() => {
  const start = (currentPage.value - 1) * pageSize.value
  const end = start + pageSize.value
  return props.tableData.slice(start, end)
})

//子传父
const emit = defineEmits(['senTo'])

//切换分页
const huan = (page: number) => {
  currentPage.value = page
  emit('senTo', paginatedTableData.value)
}
</script>

<style scoped>
</style>